<template>
  <div>
     <button @click="show=true">热门新闻</button>
     <div v-if="show">
        <HotNewsVue></HotNewsVue>
     </div>
  </div>
</template>

<script>
import ErrorComponent from './components/ErrorComponent.vue';
import LoadingComponent from './components/LoadingComponent.vue';

/**
 * 导入异步组件的方法
 * 1、为什么使用异步组件:使用异步组件提高页面加载速度:异步组件是使用的时候才导入，极大提高了页面的加载速度
 * 2、异步组件的使用：利用import()函数方式进行异步导入
 * 3、会编写异步工厂函数:处理编写异步组件之外，还要指定相应的加载组件、错误组件，过期事件、延时事件
 * 
 * 创建js对象
 * 1)基于Object对象
 * 2）字面量{}
 * 3）基于工厂函数函数
 * 4) 构造函数
 * 5) 基于构造函数+原型的方式
 */
const AsyncComponent=()=>{
  return{
    component:import(/*webpackChunkName:'GileHot'*/'@/views/HotNews.vue'),
    loading:LoadingComponent,
    error:ErrorComponent,
    delay:200,
    timeout:300
  }
}

export default {
  data(){
    return{
      show:false
    }
  },
  components: {
    HotNewsVue:AsyncComponent
  },
};
</script>

<style></style>
